<template>
  <div class="register-form">
    <div class="blue-line">
      <h2>客户信息维护</h2>
    </div>
    <div style="height: 20px"></div>
    <div class="form-content">
      <h-form :model="formItem" :label-width="80">
        <div class="form-row">
          <h-form-item label="客户姓名：" class="form-item">
            <h-input
              class="input"
              v-model="formItem.name"
              placeholder="请输入客户姓名"
              style="margin-top: 0vh"
            ></h-input>
          </h-form-item>
          <h-form-item
            label="客户类型："
            class="form-item"
            style="margin-left: 3vh"
          >
            <h-select
              v-model="formItem.user_type"
              placeholder="请选择"
              class="input"
            >
              <h-option value="个人">个人</h-option>
              <h-option value="机构">机构</h-option>
            </h-select>
          </h-form-item>
        </div>
        <div class="form-row">
          <h-form-item label="证件号码：" class="form-item">
            <h-input
              class="input"
              v-model="formItem.identity_card_id"
              placeholder="请输入客户证件号码"
              style="margin-top: 0vh"
            ></h-input>
          </h-form-item>
          <h-form-item
            label="证件类型："
            class="form-item"
            style="margin-left: 3vh"
          >
            <h-select
              class="input"
              width="200px"
              v-model="formItem.identity_card_type"
              placeholder="请选择"
            >
              <h-option value="身份证">身份证</h-option>
              <h-option value="中国护照">中国护照</h-option>
              <h-option value="士兵证">士兵证</h-option>
              <h-option value="户口本">户口本</h-option>
              <h-option value="警官">警官</h-option>
              <h-option value="文职">文职</h-option>
              <h-option value="台胞证">台胞证</h-option>
              <h-option value="其他">其他</h-option>
            </h-select>
          </h-form-item>
          <div class="button-row">
            <h-form-item class="form-item">
              <h-button type="primary" @click="userSearch" icon="android-search"
                >查询</h-button
              >
            </h-form-item>
          </div>
        </div>
      </h-form>
    </div>

    <div>
      <h-table
        style="width: 100%; height: 38vh"
        stripe
        :columns="columns1"
        :data="data"
      ></h-table>
    </div>
    <div style="height: 20px"></div>
    <div>
      <h-msg-box
        v-model="dialogVisible"
        title="修改客户信息"
        @on-ok="handleOk"
        @on-cancel="handleCancel"
        @on-close="handleCancel"
      >
        <h-form :model="editedCustomer">
          <h-form-item label="客户类型：" class="form-item">
            <h-select v-model="editedCustomer.user_type">
              <h-option value="1">个体</h-option>
              <h-option value="机构">机构</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="客户姓名：" class="form-item">
            <h-input
              v-model="editedCustomer.name"
              style="width: 31vh; margin-top: 0vh"
            ></h-input>
          </h-form-item>

          <h-form-item label="证件类型：" class="form-item">
            <h-select
              v-model="editedCustomer.identity_card_type"
              placeholder="请选择"
            >
              <h-option value="身份证">身份证</h-option>
              <h-option value="中国护照">中国护照</h-option>
              <h-option value="士兵证">士兵证</h-option>
              <h-option value="户口本">户口本</h-option>
              <h-option value="警官">警官</h-option>
              <h-option value="文职">文职</h-option>
              <h-option value="台胞证">台胞证</h-option>
              <h-option value="其他">其他</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="证件号码：" class="form-item">
            <h-input
              v-model="editedCustomer.identity_card_id"
              style="width: 31vh; margin-top: 0vh"
              readonly
            ></h-input>
          </h-form-item>
          <h-form-item label="银行卡信息：" class="form-item">
            <br />
            <h-row
              v-for="(card, index) in editedCustomer.bankCards"
              :key="index"
              size="small"
            >
              <h-col span="5">
                <h-select
                  v-model="card.type"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <h-option
                    v-for="(item, index) in typeList"
                    :key="index"
                    :value="item.value"
                    >{{ item.type }}</h-option
                  >
                </h-select>
              </h-col>
              <h-col span="12" offset="1">
                <h-input
                  type="text"
                  v-model="card.num"
                  placeholder="请输入..."
                  style="margin-top: 0vh"
                ></h-input>
              </h-col>
              <h-col span="4" offset="1">
                <h-button type="ghost" @click="handleRemove(index)"
                  >删除</h-button
                >
              </h-col>
            </h-row>
            <h-row>
              <h-col span="24">
                <h-button
                  type="dashed"
                  long
                  @click="handleAdd"
                  icon="plus-round"
                  width="100%"
                  >新增</h-button
                >
              </h-col>
            </h-row>
          </h-form-item>
        </h-form>
      </h-msg-box>
    </div>
    <div style="height: 10px"></div>
    <div>
      <h-page
        :current="page"
        :page-size="num"
        :total="totalElements"
        :simple="true"
        :show-total="true"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
        :show-elevator="true"
      ></h-page>
    </div>

    <h-msg-box
      v-model="showInfo"
      title="客户信息"
      @on-ok="ok"
      @on-cancel="handleCancel"
    >
      <h-form :model="editedCustomer">
        <h-form-item label="客户类型：" class="form-item">
          <h-input
            v-model="editedCustomer.user_type"
            style="width: 31vh; margin-top: 0vh"
            readonly
          ></h-input>
        </h-form-item>
        <h-form-item label="客户姓名：" class="form-item">
          <h-input
            v-model="editedCustomer.name"
            style="width: 31vh; margin-top: 0vh"
            readonly
          ></h-input>
        </h-form-item>

        <h-form-item label="证件类型：" class="form-item">
          <h-input
            v-model="editedCustomer.identity_card_type"
            style="width: 31vh; margin-top: 0vh"
            readonly
          ></h-input>
        </h-form-item>
        <h-form-item label="证件号码：" class="form-item">
          <h-input
            v-model="editedCustomer.identity_card_id"
            style="width: 31vh; margin-top: 0vh"
            readonly
          ></h-input>
        </h-form-item>
        <h-form-item label="银行卡信息：" class="form-item">
          <br />
          <h-row
            v-for="(card, index) in editedCustomer.bankCards"
            :key="index"
            size="small"
          >
            <h-col span="5">
              <h-input
                v-model="card.type"
                style="width: 31vh; margin-top: 0vh"
                readonly
              ></h-input>
            </h-col>
            <h-col span="16" offset="1">
              <h-input
                type="text"
                v-model="card.num"
                placeholder="请输入..."
                style="margin-top: 0vh"
                readonly
              ></h-input>
            </h-col>
          </h-row>
        </h-form-item>
      </h-form>
    </h-msg-box>
  </div>
</template>

<script>
import { userSearch, userChange, userDel, userList } from "@/api/user.js";
export default {
  data() {
    return {
      page: 1,
      totalPages: 0,
      num: 10,
      totalElements: 10,
      typeList: [{ type: "test", value: "test" },{type: "中国银行", value: "中国银行"}],
      formItem: {
        name: "",
        user_type: "",
        identity_card_type: "",
        identity_card_id: "",
        preference: "",
        page: 1,
        num: 10,
      },
      columns1: [
        {
          title: "客户类型",
          key: "user_type",
        },
        {
          title: "客户姓名",
          key: "name",
        },
        {
          title: "证件类型",
          key: "identity_card_type",
          width: 200,
        },
        {
          title: "证件号码",
          key: "identity_card_id",
          width: 200,
        },
        {
          title: "风险偏好",
          key: "preference",
          width: 100,
        },
        {
          title: "银行卡",
          key: "bankCards",
          width: 100,
          render: (h, params) => {
            return h(
              "Poptip",
              {
                props: {
                  trigger: "hover",
                  title: params.row.bankCards.length + "张银行卡",
                  placement: "bottom",
                },
              },
              [
                h("Tag", params.row.bankCards.length),
                h(
                  "div",
                  {
                    slot: "content",
                  },
                  [
                    h(
                      "ul",
                      this.data[params.index].bankCards.map((item) => {
                        return h(
                          "li",
                          {
                            style: {
                              textAlign: "center",
                              padding: "4px",
                            },
                          },
                          item.type + "：" + item.num
                        );
                      })
                    ),
                  ]
                ),
              ]
            );
          },
        },
        {
          title: "操作",
          key: "operation",
          width: 200,
          render: (h, params) => {
            return h(
              "h-button-group",
              {
                props: {
                  shape: "circle",
                },
              },
              [
                h(
                  "h-button",
                  {
                    props: {
                      type: "dashed",
                    },
                    on: {
                      click: () => {
                        console.log(params.row);
                        this.editedCustomer = JSON.parse(
                          JSON.stringify(params.row)
                        );
                        this.dialogVisible = true;
                      },
                    },
                  },
                  "修改"
                ),
                h(
                  "h-button",
                  {
                    props: {
                      type: "dashed",
                    },
                    on: {
                      click: () => {
                        this.showDetail(params.row);
                      },
                    },
                  },
                  "详情"
                ),
                h(
                  "h-button",
                  {
                    props: {
                      type: "dashed",
                    },
                    on: {
                      click: () => {
                        this.showDeleteConfirmation(params.row);
                      },
                    },
                  },
                  "删除"
                ),
              ]
            );
          },
        },
      ],
      data: [
        {
          user_type: "个体",
          name: "王小虎",
          identity_card_type: "中国大陆地区居民身份证",
          identity_card_id: "33108112341112312",
          preference: "保守型",

          bankCards: [
            {
              type: "储蓄卡",
              num: "6228480402564890018",
            },
            {
              type: "信用卡",
              num: "6228480402564890018",
            },
          ],
        },
      ],
      dialogVisible: false,
      showInfo: false,
      editedCustomer: {
        name: "",
        user_type: "",
        identity_card_type: "",
        identity_card_id: "",
        preference: "",
        bankCards: [],
      },
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },

    handlePageSizeChange(size) {
      this.pageSize = size;
      this.fetchData();
    },

    handleAdd() {
      this.editedCustomer.bankCards.push({ type: "", num: "" });
    },

    handleRemove(index) {
      this.editedCustomer.bankCards.splice(index, 1);
    },

    fetchData() {
      //TODO 发起请求获取数据
      userList({
        page: this.page - 1,
        num: this.num,
      })
        .then((res) => {
          console.log(res);
          this.data = res.data.data.content;
          this.totalElements = res.data.totalElements;
          //TODO 记得删
          this.data[0].bankCards[0].type = "中国银行";
          this.$hMessage.success("获取数据成功");
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("获取数据失败");
        });
    },

    updateCustomer() {
      //TODO 发起请求更新客户信息
      userChange({
        user: {
          name: this.editedCustomer.name,
          user_type: this.editedCustomer.user_type,
          identity_card_type: this.editedCustomer.identity_card_type,
          identity_card_id: this.editedCustomer.identity_card_id,
          preference: this.editedCustomer.preference,
        },
        bankCards: this.editedCustomer.bankCards,
      })
        .then((res) => {
          this.$hMessage.success("更新成功");
          this.fetchData();
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("更新失败");
        });
      this.dialogVisible = false;
      this.editedCustomer = {
        name: "",
        user_type: "",
        identity_card_type: "",
        identity_card_id: "",
        preference: "",
        bankCards: [],
      };
    },

    userSearch() {
      console.log(this.formItem);
      userSearch({
        name: this.formItem.name,
        user_type: this.formItem.user_type,
        identity_card_type: this.formItem.identity_card_type,
        identity_card_id: this.formItem.identity_card_id,
        page: 0,
        num: 10,
      })
        .then((res) => {
          console.log(res);
          this.data = res.data.data.content;
          console.log(this.data);
          this.$hMessage.success("查询成功");
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("查询失败");
        });
    },

    handleOk() {
      console.log(this.editedCustomer);
      const index = this.data.findIndex(
        (item) => item.identity_card_id === this.editedCustomer.identity_card_id
      );
      if (index !== -1) {
        // this.$set(this.data, index, { ...this.editedCustomer });
        this.updateCustomer();
      }
    },

    ok() {
      this.showInfo = false;
    },

    handleCancel() {
      this.dialogVisible = false;
      this.editedCustomer = {
        name: "",
        user_type: "",
        identity_card_type: "",
        identity_card_id: "",
        preference: "",
        bankCards: [],
      };
      console.log(this.editedCustomer);
    },

    showDeleteConfirmation(editedCustomer) {
      this.$hMsgBox.confirm({
        title: "警告",
        content: "确定要删除此用户吗？",
        onOk: () => {
          this.deleteCustomer(editedCustomer);
        },
        onCancel: () => {},
      });
    },

    deleteCustomer(editedCustomer) {
      const index = this.data.findIndex(
        (item) => item.identity_card_id === editedCustomer.identity_card_id
      );
      if (index !== -1) {
        //TODO: 发起请求删除客户信息
        userDel({
          identity_card_id: editedCustomer.identity_card_id,
          user_type: editedCustomer.user_type,
          identity_card_type: editedCustomer.identity_card_type,
          name: editedCustomer.name,
        })
          .then((res) => {
            console.log(res);
            this.$hMessage.success("删除成功");
            this.fetchData();
          })
          .catch((err) => {
            console.log(err);
            this.$hMessage.error("删除失败");
          });
      }
    },

    showDetail(customer) {
      console.log(customer);
      this.editedCustomer = JSON.parse(JSON.stringify(customer));
      this.showInfo = true;
    },
  },
};
</script>

  <style>
.form-content {
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
}

.button-row {
  display: flex;
}

.h-select {
  width: 200px;
}

.input {
  width: 35vh;
}

.blue-line {
  border-left: 3px solid #298dff;
  padding-left: 10px;
}
</style>
